<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>相机(想喝玉米鸡蛋排骨汤):接单私聊</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to left bottom, linen, tan);
      }

      #circle {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #f0f0f0;
        box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.5),
          5px 5px 10px rgba(0, 0, 0, 0.2);
        transition: box-shadow 0.3s ease;
        cursor: pointer;
      }

      #circle:active {
        box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.5),
          2px 2px 5px rgba(0, 0, 0, 0.2);
        transform: translate(-50%, -50%) scale(0.95);
      }

      #circle::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 8px;
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background-color: #f0f0f0;
        filter: blur(4px) brightness(90%);
      }

      #circle::after {
        content: "";
        position: absolute;
        bottom: -18px;
        left: -18px;
        width: 136px;
        height: 136px;
        border-radius: 50%;
        background-color: #fff;
        opacity: 0.8;
        transform: rotate(45deg);
      }

      .camera {
        width: 20em;
        height: 23em;
        font-size: 10px;
        display: none;
        background: radial-gradient(
            circle at 17em 7em,
            black 0.8em,
            darkgray 0.8em,
            darkgray 1em,
            transparent 1em
          ),
          radial-gradient(
            circle at 3.6em 7em,
            tomato 1em,
            darkgray 1em,
            darkgray 1.2em,
            transparent 1.2em
          ),
          linear-gradient(
              transparent 18em,
              #333 18em,
              #333 19.5em,
              transparent 19.5em
            )
            no-repeat center / 80% 100%,
          linear-gradient(blanchedalmond 10em, wheat 10em, wheat 14em, tan 14em);
        border-radius: 2em;
        position: relative;
        transform: translateY(-4em);
      }

      .camera::before {
        content: "";
        position: absolute;
        width: 4.5em;
        height: 2em;
        background-color: #333;
        border-radius: 0.5em;
        top: 1.5em;
        left: 1.5em;
      }

      .camera::after {
        content: "";
        position: absolute;
        width: 3em;
        height: 3em;
        background: radial-gradient(teal 10%, #333 30%, transparent 40%), #333;
        right: 1.5em;
        top: 1.5em;
        border-radius: 0.3em;
      }

      .lens {
        position: absolute;
        width: 8em;
        height: 8em;
        background: radial-gradient(
            circle at 60% 45%,
            khaki 0.1em,
            transparent 0.3em
          ),
          radial-gradient(circle at 50% 40%, khaki 0.3em, transparent 0.5em),
          radial-gradient(
            cadetblue 2em,
            #555 2em,
            #555 2.5em,
            #333 2.5em,
            #333 4em
          );
        border-radius: 50%;
        top: 3em;
        left: 6em;
      }

      .lens::before,
      .lens::after {
        content: "";
        position: absolute;
        width: 5em;
        height: 0.1em;
        background-color: #333;
        left: 1.5em;
        animation: take-a-photo 3s infinite;
        animation-fill-mode: forwards; /* 动画结束后保持最后一个关键帧的状态 */
      }

      @keyframes take-a-photo {
        10% {
          height: calc(50% - 1em);
        }

        20% {
          height: 0.1em;
        }
      }

      .lens::before {
        top: 1em;
      }

      .lens::after {
        bottom: 1em;
      }

      .picture {
        position: absolute;
        width: inherit;
        height: 0em;
        top: 18em;
        overflow: hidden;
        animation: print 3s;
        animation-fill-mode: forwards; /* 动画结束后保持最后一个关键帧的状态 */
      }

      @keyframes print {
        30% {
          height: 0em;
        }
        80%,
        100% {
          height: 15em;
        }
      }

      .picture::before {
        content: "";
        position: absolute;
        box-sizing: border-box;
        width: 15em;
        height: 15em;
        /* 替换为你的图片URL */
        background-size: cover;
        left: 2.5em;
        border: solid linen;
        border-width: 0 1em 2em 1em;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <!-- 相机 -->
    <div class="camera">
      <span class="lens"></span>
      <span class="picture"></span>
    </div>
    <!-- 拟态按钮 -->
    <div id="circle"></div>
  </body>
  <script>
    window.onload = function () {
      let circle = document.getElementById("circle"); //点击拍照按钮
      let camera = document.querySelector(".camera"); //相机
      var style = document.createElement("style");
      document.head.appendChild(style);
      // 获取新创建的样式表
      var sheet = style.sheet;
      // 添加类
      circle.addEventListener("mousedown", function () {
        circle.classList.add("active");
      });
      // 移除类
      circle.addEventListener("mouseup", function () {
        circle.classList.remove("active");
        setTimeout(() => {
          initPicture();
        }, 500);
      });

      function initPicture() {
        // 创建一个<input>元素
        let input = document.createElement("input");
        // 设置input的属性
        input.type = "file";
        input.accept = "image/*";
        // 监听input的change事件
        input.addEventListener("change", function () {
          // 获取选中的文件
          let file = input.files[0];
          // 创建文件读取器
          let reader = new FileReader();
          // 监听文件读取完成事件
          reader.onload = function (e) {
            // 将读取的结果赋值给预览图元素的src属性
            sheet.insertRule(
              ".picture::before { background-image: url(" +
                e.target.result +
                "); }",
              0,
            );
            circle.style.display = "none";
            camera.style.display = "block";
          };
          // 读取文件
          reader.readAsDataURL(file);
        });
        // 模拟点击input元素
        input.click();
      }
    };
  </script>
</html>
